<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../../css/sm.min.css">
		<link rel="stylesheet" href=" ../../css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<!-- css的使用-->
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			<!-- 标题栏 -->
			<header class="bar bar-nav" id="back">
				<!-- 生成返回口超链接 -->

				<!-- 社区入口 -->
				<h1 class="title">商品详情</h1>
			</header>



			<!-- 工具栏 -->
			<nav class="bar bar-tab">	
				<a class="tab-item external" href="../../shop_index.html">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="../chat/chat.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="../cart/cart.html">
					<span class="icon icon-cart"></span>
					<span class="tab-label">购物车</span>
				</a>
				<a class="tab-item external" href="../user/userCenter.html">
					<span class="icon icon-me"></span>
					<span class="tab-label">我的购物</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				
				<!-- 搜索栏 -->
				 <div class="searchbar row">
				     <div class="search-input col-85">
				       <input @click="goSearch" type="search" id='search' placeholder='输入关键字...'/>
				     </div>
				     <a @click="goSearch" class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
				 </div> 
				
				<div class="content-block-title">产品参数</div>
				  <div class="list-block">
				    <ul>
				      <li class="item-content item-link">
				        <div class="item-media"><i class="icon icon-f7"></i></div>
				        <div class="item-inner">
				          <div class="item-title">商品名称</div>
				          <div class="item-after" >
							  <input type="" name="" id="name" value="" disabled="" style="border: none;"/>
						  </div>
				        </div>
				      </li>
				      <li class="item-content item-link">
				        <div class="item-media"><i class="icon icon-f7"></i></div>
				        <div class="item-inner">
				          <div class="item-title">商品价格</div>
				          <div class="item-after">
							  <input type="" name="" id="price" value="" disabled=""  style="border: none;"/>
						  </div>
				        </div>
				      </li>
				    </ul>
				  </div>
				
			</div>
			
			
			
		</div> <!-- /vue -->	 
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='../../js/jquery-3.2.1.min.js'></script>
		<script src='../../js/sm.js'></script>
		<script src='../../js/sm-extend.js'></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- VUE的使用 -->
		<script>
		        var app = new Vue({
		            el:"#app",
		            data:{
						arg:"",
		                array:[]
		            },
		            // 方法区
		            methods:{
						//跳转到搜索页面的方法
						 goSearch:function(){ 
						window.location="../shop_search.html"
						},
		            }
		        });
		</script>
		<!-- 一般js -->
		<script type="text/javascript">
		//初始化方法
		$(function(){
			//首先找到商品的id
			var shopId = getUrlParam('shopId');
			//alert(shopId);
			//初始化方法
			initArgs(shopId);
			
		});
				
		//初始化参数列表		
		 function initArgs(id){
			 
			 //调到商品参数
			 $.get({type: 'get',
					url: serviceIP+"/shop/initDetail",
					dataType: 'json',
					data:{shopId: id},
					headers: {
						"token":token,
						"refreshtoken":refreshtoken
					},
					success:function(d){
					//填充名字
			 		$("#name").val(d.data.data.name);
					//填充价格
					$("#price").val(d.data.data.price);
					//生成跳转口
					var backarea = 	"<a class='button button-link button-nav pull-left' href='commodityDetail.html?shopId="+d.data.data.shopId+"'>"+
										"<span class='icon icon-left'></span>"+
									"</a>";
					$("#back").append(backarea);
					}
			 })
		 }
		 
		</script>
		<!-- auxiliary js -->
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
	</body>
</html>
